<template>
  <div class="common-footer" :style="footerStyle">
    <div class="menu-container">
      <div 
        v-for="(item, index) in config.menuItems" 
        :key="index"
        class="menu-item"
        :class="{ 'menu-item-active': isCurrentMenu(item) }"
        :style="getMenuItemStyle(item)"
        @click="handleMenuClick(item)"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonFooter',
  props: {
    config: {
      type: Object,
      default: () => ({
        text: '页面底部',
        menuItems: [],
        menuColor: '#ffffff',           // 默认未选中文字颜色
        menuActiveColor: '#1890ff',     // 选中文字颜色
        menuFontSize: '16px',
        menuBackground: 'transparent',   // 默认背景色
        menuActiveBackground: 'rgba(255, 255, 255, 0.1)', // 选中背景色
        menuBackgroundImage: '',        // 默认背景图片
        menuActiveBackgroundImage: '',  // 选中状态背景图片
        menuWidth: 'auto',              // 菜单项宽度
        menuHeight: '40px',             // 菜单项高度
        currentMenu: '',                // 当前选中的菜单
        backgroundImage: '',
        backgroundColor: '#333333',
        height: '60px'
      })
    }
  },
  computed: {
    footerStyle() {
      return {
        backgroundImage: this.config.backgroundImage ? `url(${this.config.backgroundImage})` : 'none',
        backgroundColor: this.config.backgroundColor,
        height: this.config.height,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
      }
    }
  },
  methods: {
    isCurrentMenu(item) {
      return this.config.currentMenu === item.text;
    },
    getMenuItemStyle(item) {
      const isActive = this.isCurrentMenu(item);
      const bgImage = isActive ? this.config.menuActiveBackgroundImage : this.config.menuBackgroundImage;
      
      return {
        color: isActive ? this.config.menuActiveColor : this.config.menuColor,
        fontSize: this.config.menuFontSize,
        backgroundColor: isActive ? this.config.menuActiveBackground : this.config.menuBackground,
        backgroundImage: bgImage ? `url(${bgImage})` : 'none',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        width: this.config.menuWidth,
        height: this.config.menuHeight,
        lineHeight: this.config.menuHeight
      }
    },
    handleMenuClick(item) {
      // 更新当前选中菜单
      this.$emit('update:config', {
        ...this.config,
        currentMenu: item.text
      });
      
      // 路由跳转
      if (item.route) {
        this.$router.push(item.route).catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
    }
  }
}
</script>

<style scoped>
.common-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-top: 4.5vh;
}

.menu-item {
  cursor: pointer;
  transition: all 0.3s;
  padding: 5px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-item:hover {
  opacity: 0.8;
}

.menu-item-active {
  position: relative;
}

.menu-item-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
}
</style> 